<div class="demo-toolbar">

  <p>
    <md-toolbar>
      <md-icon class="demo-toolbar-icon">menu</md-icon>
      <span>Default Toolbar</span>

      <span class="demo-fill-remaining"></span>

      <md-icon>code</md-icon>
    </md-toolbar>
  </p>

  <p>
    <md-toolbar color="primary">
      <md-icon class="demo-toolbar-icon">menu</md-icon>
      <span>Primary Toolbar</span>

      <span class="demo-fill-remaining"></span>

      <md-icon>code</md-icon>
    </md-toolbar>
  </p>

  <p>
    <md-toolbar color="accent">
      <md-icon class="demo-toolbar-icon">menu</md-icon>
      <span>Accent Toolbar</span>

      <span class="demo-fill-remaining"></span>

      <md-icon>code</md-icon>
    </md-toolbar>
  </p>

  <p>
    <md-toolbar color="accent">
      <span>Custom Toolbar</span>
      <md-toolbar-row>
        <span>Second Line</span>
      </md-toolbar-row>
    </md-toolbar>
  </p>

  <p>
    <md-toolbar color="primary">
      <span>Custom Toolbar</span>

      <md-toolbar-row>
        <span>Second Line</span>

        <span class="demo-fill-remaining"></span>

        <md-icon class="demo-toolbar-icon">verified_user</md-icon>
      </md-toolbar-row>

      <md-toolbar-row>
        <span>Third Line</span>

        <span class="demo-fill-remaining"></span>

        <md-icon class="demo-toolbar-icon">favorite</md-icon>
        <md-icon class="demo-toolbar-icon">delete</md-icon>
      </md-toolbar-row>
    </md-toolbar>
  </p>

</div>
<md-card>Simple card</md-card>
<div class="demo-card-container">
  <md-card>
    Hello
  </md-card>

  <md-card>
    <md-card-title-group>
        <md-card-title>Card with title</md-card-title>
        <md-card-subtitle>Subtitle</md-card-subtitle>
        <img md-card-md-image>
    </md-card-title-group>
    a as asf asd fasd ass
  </md-card>

  <md-card>
    <md-card-subtitle>Subtitle</md-card-subtitle>
    <md-card-title>Card with title and footer</md-card-title>
    <md-card-content>
      <p>This is supporting text.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </md-card-content>
    <md-card-actions>
      <button md-button>LIKE</button>
      <button md-button>SHARE</button>
    </md-card-actions>
    <md-card-footer>
      <md-progress-bar mode="indeterminate"></md-progress-bar>
    </md-card-footer>
  </md-card>

  <md-card>
    <img md-card-image src="https://material.angularjs.org/latest/img/washedout.png">
    <md-card-title>Content Title</md-card-title>
    <md-card-content>
      <p>Here is some content</p>
    </md-card-content>
    <md-card-actions align="end">
      <button md-button>LIKE</button>
      <button md-button>SHARE</button>
    </md-card-actions>
  </md-card>

  <md-card>
    <md-card-header>
      <img md-card-avatar>
      <md-card-title>Header title</md-card-title>
      <md-card-subtitle>Header subtitle</md-card-subtitle>
    </md-card-header>
    <img md-card-image src="https://material.angularjs.org/latest/img/washedout.png">
    <md-card-content>
      <p>Here is some content</p>
    </md-card-content>
  </md-card>

  <md-card class="demo-card-blue mat-card-flat">
    <md-card-title>Easily customizable</md-card-title>
    <md-card-actions>
      <button md-button>First</button>
      <button md-button>Second</button>
    </md-card-actions>
  </md-card>
</div>

<div>
  <md-input-container>
    <input type="text" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
  </md-input-container>

  <md-autocomplete #auto="mdAutocomplete">
    <md-option *ngFor="let option of filteredOptions" [value]="option">
      {{ option }}
    </md-option>
  </md-autocomplete>
</div>
<div echarts [options]="mapOption" class="demo-chart" (chartClick)="onChartClick($event)" (chartInit)="onChartInit($event)"></div>
<div echarts [options]="chartOption" class="demo-chart" (chartClick)="onChartClick($event)" [loading]="loading"></div>

<div echarts [options]="pieOptions" class="demo-chart" (chartClick)="onChartClick($event)" [loading]="loading"></div>

<div echarts [options]="barOption" class="demo-chart" [dataset]="optionDataSet" (chartClick)="onChartClick($event)" [loading]="loading"></div>
<div>
  <button type="button" (click)="changeLoading()">change loading status</button>
</div>
